<template>
  <div class="背景">
    <div class="激励语">
      <div>仲夏麦飘香，</div>
      <div>又逢高考时。</div>
    </div>
    <div class="登录组件" 
        ref="form"
        :model="form"
        :rules="rules">
      <div prop="name" class="输入框组件">
        <div class="输入框信息">账户</div>
        <input class="输入框" placeholder="请输入证件号或手机号" v-model="form.name" />
      </div>
      <div  prop="pwd"  class="输入框组件">
        <div class="输入框信息">密码</div>
        <input class="输入框" placeholder="请输入密码" v-model="form.pwd" />
      </div>
      <button class="登录按钮" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';
import { Toast } from 'vant';
export default {
  name: "Login",
  data() {
    return {

      form: {
        name:"",
        pwd:""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名字",
            trigger: "blur",
          },
          {
            min: 1,
            max: 10,
            message: "长度应为1到10",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 1,
            message: "长度应不小于1",
            trigger: "blur",
          },
        ],
      },
    };
  },
  
   components: {
    Toast,
    
  },
   methods: {
    login() {
      request.post("login.php", this.form).then((res) => {
            console.log(res);
            if (res.code === "0") {
              Toast.success('登录成功');
              localStorage.setItem("zyh_stu_id", res.data.stu_id);
              localStorage.setItem("zyh_stu_name",res.data.stu_name);
              console.log(localStorage.getItem("zyh_stu_name"));
              this.$router.push("/"); //登录成功后跳转主页
            } else {
             Toast.fail('登录失败');
            }
          });
    },
  },
};
</script>

<style>
body {
  margin: 0;
}

html,
body,
#app,
.背景 {
  height: 100%;
}

.背景 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f6f6;
  background-image: url(@/assets/背景-登录.png);
  background-repeat: no-repeat;
  background-position: bottom;
}

.激励语 {
  top: 15%;
  left: 8%;
  position: absolute;
  font-size: 22px;
  line-height: 40px;
  color: #d8800f;
}

.登录组件 {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  font-size: 14px;
}

.输入框组件 {
  width: 260px;
  height: 45px;
  margin-bottom: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  background-color: #fff;
  color: #666666;
}

.输入框信息 {
  padding: 0 10px;
  border-right: 1px solid #666666;
  line-height: 14px;
}

.输入框 {
  margin-left: 15px;
  border: none;
  outline: none;
}

.登录按钮 {
  width: 125px;
  height: 50px;
  margin-top: 30px;
  border: none;
  background-color: #f5611c;
  border-radius: 4px;
  color: #fff;
}
</style>